<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#div1{
				width:100px;
				height:100px;
				background: red;
				border:1px solid red;
				position:absolute;
				top:50px;
				left:50px;
			}
			#div2{
				width:80px;
				height:80px;
				background: blue;
				position:absolute;
				top:300px;
				left:300px;
			}
		</style>
		<script>
			window.onload = function(){
				var oDiv = document.getElementById("div1");
				
				oDiv.onmousedown = function(ev){
					var e = window.event || ev;
//					鼠标按下时,计算出鼠标按下相对于拖拽元素外边框的距离.这个距离可以通过.鼠标按下相对于浏览器的距离（e.clientX）-元素边界相对于浏览器的距离获得（oDiv.offsetLeft）
//					为什么要获得这个距离呢?因为拖拽实际上是实时改变拖拽元素的left 和top值.有了disX和disY之后,我们可以通过 鼠标相对于浏览器的距离clientX-disX来获得拖拽元素当前的left值.top值同理
					var disX = e.clientX-oDiv.offsetLeft;
					var disY = e.clientY-oDiv.offsetTop;
					document.onmousemove = function(ev){
						var e = window.event || ev;
//						用鼠标移动相对于浏览器的距离-disX得到元素当前的left值
						var left = e.clientX - disX;
//						用鼠标移动相对于浏览器的距离-disY得到元素当前的top值
						var top = e.clientY-disY;
//						将值写入元素的行内样式,这样拖拽元素就跟随鼠标移动了.
						oDiv.style.left = left + 'px';
						oDiv.style.top = top + 'px';
					}
					document.onmouseup = function(){
//						鼠标抬起是,清除鼠标移动事件
						document.onmouseup = null;
						document.onmousemove = null;
					}
//					阻止浏览器默认事件,以防止误操作选中拖拽元素中的图片或文字,造成的bug。因为浏览器默认图片和文字选中之后是可拖拽的。
					return false;
				}
			}
		</script>
	</head>
	<body>
		<div id="div1"></div>
		<div id="div2">222</div>
		
	</body>
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
</html>
